<template>
  <div class="header">
    <div class="logo">
      <span class="logo-text">演示系统</span>
    </div>
    <div class="nav">
      <div class="person">
        <i class="iconfont icon-user"></i>
        <span class="name">{{userInfo.username}}</span>
      </div>
      <div class="operator">
        <span @click="logout">退出</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {saLogout} from "../../methods2";

  export default {
    name: "topBar",
    data() {
      return {
        userInfo: {}
      }
    },
    methods:{
      logout(){
        saLogout();
        this.$message.success('已成功清除登录信息');
      }
    },
  }
</script>

<style scoped lang="scss">
  @import '../../static/style/public';
  $iconSize: 35px;
  $iconSizeSmall:18px;
  .header {
    display: flex;
    position:fixed;
    left:0px;
    right:0px;
    top:0px;
    height: $topBarHeightMax;
    background-color: #f5f5f6;
    .logo {
      @include flexCenter;
      position:relative;
      width: $asideWidth;
      height: 100%;
      background-color: $primaryColor;;
      color: white;
      img{
        height:60px;
      }
      .name{
        padding:1px;
        border:2px solid white;
        border-radius: 5px;
        font-size:14px;
      }
    }
    .nav,.person{
      display: flex;
      align-items: center;
      background-color: $primaryColor2;
    }
    .nav{
      justify-content: space-between;
      position:absolute;
      left:$asideWidth;
      top:0px;
      right:0px;
      bottom:0px;
      padding:0px 30px;
      color: #87aece;
      .iconfont{
        font-size: $iconSizeSmall - 2px;
      }
      .name{
        font-size:$iconSizeSmall;
      }
      .name:hover,.operator:hover{
        cursor: pointer;
        &:hover{
          color: white;
        }
      }
      .operator{
        font-size:16px;
        font-weight: 600;
      }

    }
  }
</style>
